<template>
  <div>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="选择商品分类 1" ></el-step>
      <el-step title="填写商品信息 2" ></el-step>
      <el-step title="填写商品属性 3" ></el-step>
    </el-steps>

    
    <!-- 阻止表单默认提交 @submlt.native.prevent="save"-->
    <el-form label-width="120px">
      <el-tabs type="border-card" :value="active+''">
        <el-tab-pane label="基本信息" name="0">
          <!-- 级联选择器 -->
          <el-cascader-panel :options="categoriesList" v-model="pojo.selectedCat"></el-cascader-panel>
        </el-tab-pane>

        <el-tab-pane label="商品内容" name="1">
          <el-form-item label="商品分类">

           <span>{{pojo.selectedCat}}</span>
         </el-form-item>
         <el-form-item label="商品名称">
           <el-input type="text" v-model="item.name"></el-input>
         </el-form-item>
         <el-form-item label="副标题">
           <el-input type="text" v-model="item.name"></el-input>
         </el-form-item>
         <el-form-item label="商品品牌">
           <select :options="checkedList">
           </select>
         </el-form-item>
         <el-form-item label="商品介绍">

           <el-input type="textarea" v-model="item.dsc"></el-input>
         </el-form-item>
         <el-form-item label="运费模板">
           <select :options="checkedList">
           </select>
         </el-form-item>
         <el-form-item label="商品货号">
           <el-input type="text" v-model="item.name"></el-input>
         </el-form-item>
         <el-form-item label="服务保证">
           <el-checkbox-group v-model="checkedList">
            <el-checkbox label="无忧退货"></el-checkbox>
            <el-checkbox label="快速退款"></el-checkbox>
            <el-checkbox label="免费包邮"></el-checkbox>

          </el-checkbox-group>
        </el-form-item>

      </el-tab-pane>

      <el-tab-pane label="商品属性" name="2">
<span>商品属性</span>
        <el-form-item label="规格参数组">               
         <el-input type="text" v-model="item.name"></el-input>
       </el-form-item>
       <el-form-item label="商品规格">
         <el-checkbox-group v-model="checkedList">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
        </el-checkbox-group>
        <el-input type="text"></el-input>
        <el-button>添加</el-button>
      </el-form-item>
<el-form-item label="商品规格">
  <el-table
  :data="checkedList"
  style="width: 100%">
  <el-table-column
  prop="date"
  label="日期"
  width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</el-form-item>
<span>商品参数</span>
<el-form-item label="上市年份">
 <select :options="checkedList">
 </select>
</el-form-item>
<el-form-item label="主材含量">
 <el-input type="text" v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="适用对象">
 <el-input type="text" v-model="item.name"></el-input>
</el-form-item>

<el-form-item label="商品相册">
<el-row>
      <el-col :span="3.5" v-for="(item, i) in 6" :key="i" style="padding: 5px;">
        <el-card>
          <el-image
          style="width: 100px; height: 100px"
          :src="url"
          :fit="cover">
        </el-image>
          <div>     
            <div class="bottom clearfix">
              <el-button type="text" class="button">编辑</el-button>
              <el-button type="text" class="button">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
</el-row>
<el-button type="primary" class="button">上传图片</el-button>
<el-button type="primary" class="button">从图片库中选择</el-button>
</el-form-item>
    
    <el-form-item label="商品详情">
      <vue-editor v-model="model.name" useCustomImageHandler @image-added="handleImageAdded"></vue-editor>
    </el-form-item>

</el-tab-pane>
</el-tabs>



<el-form-item id="btn1"> 
  <el-button style="margin-top: 12px;" @click="back" v-if="isBack">上一步</el-button>
  <el-button style="margin-top: 12px;" @click="next" v-if="isNext">下一步</el-button>
  <el-button type="primary" @click="save" v-if="isSave">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script type="text/javascript">
import { VueEditor } from 'vue2-editor'
  export default {
    props: [
    'id'
    ],
    components: {
      VueEditor
    },
    data(){
    	return {
           //这个模型 里面的属性对应 数据库mongoose 里面 secham 属性名和类型
           item: {},
           pojo:{
            selectedCat: '',
           },
           active: 0,
           model: {},
           isNext: true,
           isSave: false,
           isBack: false,
           categoriesList: [

           ],//商品分类 级联选择器
           
           checkedList: []
           
         }
       },
       created(){
         this.id && this.fetch()
         this.getAllGoodsCats()


       },
       methods: {
        // 这个函数 上传完图片执行  返回 图片的信息
        async handleAvatarSuccess(res){

          // 由于改变 对象的属性个数  vue 无法及时的渲染  使用使用该方法 第二次遇到该问题
          this.$set(this.model,'avatar',res.url)
          
          //  给model 添加一个iocn 属性   
          // this.model.icon = res.url
        },
        async handleImageAdded(){
          console.log(this.model)

        },
        
        // 保存 新建的分类
        async save(){
            // 通一个组件 同时完成新建与修改  通过id 来区别 该使用什么接口
            let res 
            
            
            //非空判断
            if (this.model.name) {
            // 如果点了编辑后 这个页面都有了 id  再去新建的话 因为是同一个页面 所以也有id
            // 那它怎么 用新建的接口呢  this.id   使用用 this.$refs.h1.html
            if (this.id) {

                // 用put 请求来 修改数据

                res = await this.$http.put('rest/heroes/'+this.id,this.model)
              }else {
                // res  类似于 旧版的 result
                
                res = await this.$http.post('rest/heroes',this.model)
              }   
              this.model = ''
                //请求完跳转到/categories/list
                this.$router.push('/heroes/list')
                //提示信息  vue自带的
                this.$message({
                  type: 'success',
                  message: this.id?'修改成功':'保存成功'
                })
              }else {

                //提示信息  vue自带的
                this.$message({
                  type: 'error',
                  message: '内容不能为空'
                })
              }

            },
        // 查找商品分类
        async fetch(){
          const res = await this.$http.get('rest/heroes/'+this.id)
            // 把查到的数据 用双向数据绑定的方法 显示在页面中
            // this.model = res.data
            // 参数一：初始数据类型  参数二： 添加数据    三： 更新数据  不覆盖
            this.model = Object.assign({},this.model,res.data)
          },
          async next(){

           this.active = this.active + 1 ;
             // this.isBack = true;
             if (this.active < 2) {
              this.isBack = true
            }else if(this.active == 2){
              this.isNext = false
              this.isSave = true
            }
          },
          async back(){
            this.active = this.active - 1 ;
            if (this.active > 0 ) {
              this.isNext = true
              this.isSave = false
            }else if(this.active == 0){
              this.isBack = false

            }

          },
          async getAllGoodsCats(){
            const res = await this.$http.get('/api/category/findAll.do');
               res.data.forEach(item => {
                  item.value = item.id
                  item.label = item.name
                  item.children = item.menu
                  item.children.forEach(item2 => {
                    item2.value = item2.id
                    item2.label = item2.name
                    item2.children = item2.menu
                    item2.children.forEach(item3 => {
                      item3.value = item3.id
                      item3.label = item3.name
                      
                    })

                  })
               })
            this.categoriesList = res.data

            console.log(this.categoriesList)
          }

        }

      }

    </script>

    <style type="text/css">
    #btn1 {
      margin: 2rem;
      float: left;
    }
    .el-rate {
      line-height: 50px;
      float: left;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      float: left;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;

    }
    .avatar-uploader-icon {

      font-size: 28px;
      color: #8c939d;
      width: 78px;
      height: 78px;
      line-height: 78px;
      text-align: center;

    }
    .avatar {
      width: 78px;
      height: 78px;
      display: block;

    }

  </style>